<template>
    <div class="article-home">
        <!-- 顶部轮播图区域 -->
        <el-carousel :interval="5000" arrow="always" ref="carouselRef" class="carousel" indicator-position="outside">
            <el-carousel-item v-for="item in images" :key="item.src">
                <img :src="item.src" alt="轮播图" class="carousel-image" />
            </el-carousel-item>
        </el-carousel>
        <!-- 卡片区域 -->
        <div class="cards-container">
            <el-card
                v-for="item in articles"
                :key="item.id"
                class="article-card"
                @click="navigateToArticleDetail(item.id)"
            >
                <div class="card-content">
<!--                    <img :src="'/project/files'+item.imgUrl" alt="菜谱图片" class="recipe-image" />-->
                    <el-image :src="baseUrl+item.imgUrl" alt="菜谱图片" class="recipe-image"></el-image>
                    <div class="text item">
                        {{  item.articleSummary }}
                    </div>
                </div>
                <div class="clearfix">
                    <span>{{item.title}}|发布者: {{ item.userId }}</span>
                </div>
            </el-card>
        </div>
<!--    按钮点击加载更多-->
    <div style="text-align: center;">
        <el-button
            style="margin-top: 10px; margin-left: 8px;"
            type="success"
            round
            plain
            @click="navigateToCommunityHome"
        >
            <el-icon><Plus /></el-icon>点击加载更多
        </el-button>
    </div>
        </div>

</template>


<script setup>
import {ElCarousel, ElCarouselItem, ElCard, ElButton, ElMessage, ElIcon} from 'element-plus';
import axios from "axios";
import { useRouter } from 'vue-router';
import {onMounted, ref} from "vue";

const user =ref(getUser())
// 示例文章数据
const articles =ref( []);
const baseUrl = getBaseUrl();

// 示例图片数据
const images = [
    { src: '/image/login/lun1.jpg' },
    { src: '/image/login/lun2.png' },
    { src: '/image/login/lun3.png' },
    { src: '/image/login/lun4.png' }
];

// 路由
const router = useRouter();

// 加载文章数据
const loadArticles = () => {
    axios.get(BASE_URL+'/v1/article/select')
        .then((response) => {
            if (response.data.code === 2000) {
                articles.value = response.data.data;
                console.log(articles.value);
            } else {
                ElMessage.error(response.data.msg);
            }
        });
};

// 导航到文章详情页
const navigateToArticleDetail = (id) => {
    router.push('/article?id='+id);
};

onMounted(() => {
    loadArticles();
});
//导航到社区页面
const navigateToCommunityHome=()=>{
    router.push('/community')
}
</script>

<style scoped>
.article-home {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.carousel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 300px; /* 固定高度 */
    padding: 20px;
}

.carousel-image {
    width: 100%;
    height: 100%; /* 图片高度与轮播图相同 */
    object-fit: cover; /* 使图片填充整个容器 */
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.article-card {
    border-radius: 16px; /* 使卡片边缘圆滑 */
    overflow: hidden; /* 确保内容不会溢出卡片 */
    width: 280px; /* 卡片宽度，根据需要调整 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: transform 0.2s; /* 添加过渡效果 */
}

.article-card:hover {
    transform: translateY(-5px); /* 鼠标悬停时稍微上移 */
}

.card-content {
    padding: 16px;
    font-size: 10px;

}

.recipe-image {
    width: 100%;
    height: 250px; /* 根据需要调整高度 */
    object-fit: cover; /* 使图片覆盖整个区域 */
    border-radius: 16px 16px 0 0; /* 使图片顶部圆滑 */
}

.text.item {
    margin-top: 16px;
    font-size: 15px;
    color: #333333;
    font-weight: bold;
}

.clearfix {
    padding: 8px 16px;
    /*background-color: #f5f5f5;*/
    border-top: 1px solid #ddd;
    text-align: left;
    font-size: 11px;
    color: #777777;
}

.user-name {
    margin-left: 10px;
    font-size: 14px;
    color: #666;
}
</style>
